<template>
    <div class="commonform-container">
        <Introduce title="普通表单">
            <template #introduce>
                用户收集用户数据上传至服务端,这里采用element组件完成
            </template>
        </Introduce>
        
        <el-form class="common-form" ref="commonForm" :model="form" label-width="80px" >
            <el-form-item label="姓名:" style="width:400px" >
                <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
            </el-form-item>


            <el-form-item label="出生日期:" style="width:400px" >
                 <el-date-picker style="width:100%" v-model="form.birth" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>

            
             <el-form-item label="居住地:" style="width:400px">
                <el-select v-model="form.region" placeholder="请选择区域" style="width:100%">
                    <el-option label="北京" value="shanghai"></el-option>
                    <el-option label="上海" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="专业:" style="width:400px">
                 <el-cascader
                    style="width:100%;"
                    v-model="form.work"
                    placeholder="请选择专业"
                    :options="options"
                    :props="{ expandTrigger: 'hover' }"
                   >
                 </el-cascader>
            </el-form-item>

            <el-form-item label="性别:" style="width:400px">
                <el-radio v-model="form.gender" label="1">男</el-radio>
                <el-radio v-model="form.gender" label="2">女</el-radio>
            </el-form-item>

            <el-form-item label="爱好:" style="width:400px">
                 <el-checkbox-group v-model="form.habits">
                    <el-checkbox label="看动漫"></el-checkbox>
                    <el-checkbox label="打游戏"></el-checkbox>
                    <el-checkbox label="打篮球"></el-checkbox>
                    <el-checkbox label="学习(不可能的)" disabled></el-checkbox>
                    <el-checkbox label="写代码(猝死了)" disabled></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="年龄:" style="width:400px">
                <el-input-number v-model="form.age" :min="numberRule.min" :max="numberRule.max" ></el-input-number>
            </el-form-item>

            <el-form-item label="评价:" style="width:400px">
                <el-rate v-model="form.rate" :colors="rateColors"></el-rate>
            </el-form-item>

            <el-form-item label="开关:" style="width:400px">
                <el-switch
                v-model="form.close"
                active-color="#13ce66"
                inactive-color="#ff4949">
                </el-switch>
            </el-form-item>

            <el-form-item label="转账金额:" style="width:400px">
                <el-slider v-model="form.money"></el-slider>
            </el-form-item>

            <el-form-item label="备注:" style="width:400px">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>

        </el-form>

        <div class="form-btn">
             <el-button type="success" class="btn1">提交</el-button>
            <el-button type="warning">保存</el-button>
        </div>
        
    </div>

</template>

<script>
import { reactive } from 'vue'
export default {
    setup(){

        const form = reactive({
            name: '',
            region: '',
            gender: '',
            habits: [],
            age: 1,
            rate: 0,
            birth: '',
            work: [],
            close: true,
            desc: '',
            money: 0
        })
        
        const numberRule = reactive({
            max: 120,
            min: 1
        })
        
        const rateColors = reactive(['#99A9BF', '#F7BA2A', '#FF9900'])

        const options = reactive([
            {
                label: '计算机',
                value: 'computer',
                children: [
                    {
                        label: '计算机科学与技术',
                        value: 'jisuanjikexueyujishu'
                    },
                    {
                        label: '软件工程',
                        value: 'ruanjiangongcheng'
                    },
                    {
                        label: '网络工程',
                        value: 'wangluogongc'
                    }
                ]
            },
            {
                label: '电子信息',
                value: 'ele',
                children: [
                    {
                        label: '自动化',
                        value: 'zidonghua'
                    },
                    {
                        label: '微电子',
                        value: 'weidianzi'
                    },
                    {
                        label: '电子与电器工程',
                        value: 'dianziyudianqigongcheng'
                    }
                ]
            }
        ])
        return {
            form,numberRule,rateColors,options
        }
    }
}
</script>

<style lang="scss" scoped>
.commonform-container{

    .common-form{
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px 0 10px 0;
        
    }

    .el-rate {
        padding-top: 10px;
    }

    .form-btn{
        background: #fff;
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
        .btn1{
            margin-right: 40px;
        }
    }
}
</style>

<style>
.el-slider__bar{
    background-color: #13ce66 !important;
}

.el-slider__button {
    border: 2px solid  #13ce66 !important;
}
</style>